<div class="d-flex align-items-stretch user-box">
	{include file="user/left_nav"}
	<div class="user-content w-100 p-3">
		{if empty($order)}
			<div class="text-center display-4 text-muted p-5">订单不存在</div>
		{else}
			<form method="post" data-after="pay_complete">
				<input type="hidden" name="order_id" value="{$order['order_id']}">
				<div class="form-group row pt-5">
					<label class="col-sm-3 text-right">流水号：</label>
					<div class="col-sm-9">{$order['order_id']}</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 text-right">订单金额：</label>
					<div class="col-sm-9 font-weight-bold text-danger">￥{$order['all_price']}</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 text-right">创建时间：</label>
					<div class="col-sm-9">{$order['create_time']}</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 text-right">当前状态：</label>
					<div class="col-sm-9">{$order['status_text']}</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 text-right">所购套餐：</label>
					<div class="col-sm-9">【{$order['type_text']}】{$order['title']}</div>
				</div>
				{if $order['status'] == -1}
					<div class="alert">当前订单已失效，请重新生成订单</div>
				{elseif $order['status'] == 0}
					<div class="form-group row d-flex align-items-center">
						<label class="col-sm-3 text-right">支付方式：</label>
						<div class="col-sm-9">
							<div class="btn-group btn-group-toggle" data-toggle="buttons">
								{if $_G['setting']['wxpay_switch']}
									<label class="btn btn-danger cursor active">
										<input type="radio" name="payment" value="wxpay" checked>
										<svg class="iconfont" aria-hidden="true">
										    <use xlink:href="#icon-weixinzhifu"></use>
										</svg>
										微信支付
									</label>
								{/if}
								{if $_G['setting']['alipay_switch']}
									<label class="btn btn-danger cursor">
										<input type="radio" name="payment" value="alipay">
										<svg class="iconfont" aria-hidden="true">
										    <use xlink:href="#icon-zhifubao"></use>
										</svg>
										支付宝
									</label>
								{/if}
								{if $_G['setting']['qqpay_switch']}
									<label class="btn btn-danger cursor">
										<input type="radio" name="payment" value="qqpay">
										<svg class="iconfont" aria-hidden="true">
										    <use xlink:href="#icon-qq"></use>
										</svg>
										QQ钱包
									</label>
								{/if}
								<label class="btn btn-danger cursor">
									<input type="radio" name="payment" value="balance">
									<svg class="iconfont" aria-hidden="true">
									    <use xlink:href="#icon-balance"></use>
									</svg>
									账户余额
								</label>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-3 text-right">&nbsp;</label>
						<div class="col-sm-9"><button class="btn btn-success" type="submit" data-before="pay_before">立即支付</button></div>
					</div>
				{elseif $order['status'] == 1}
					<div class="form-group row">
						<label class="col-sm-3 text-right">支付时间：</label>
						<div class="col-sm-9">{$order['pay_time']}</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-3 text-right">支付方式：</label>
						<div class="col-sm-9">{$order['pay_type']}</div>
					</div>
				{/if}
			</form>
		{/if}
	</div>
</div>
{if !empty($order) && $order['status'] == 0}
	<script type="text/javascript" src="static/js/jquery.qrcode.js"></script>
	<script type="text/javascript">
		var showQrcode,queryInterval;
		queryOrder();
		function pay_before(form,btn){
			if($('input[name="payment"]:checked').val() == 'alipay'){
				btn.removeClass('ajax-post');
				form.attr('target','_blank');
			}else{
				btn.addClass('ajax-post');
				form.removeAttr('target');
			}
		}
		function pay_complete(form,s,btn){
			var payment = $('input[name="payment"]:checked').val();
			if(s.code != 1){
				dialog.msg(s);
			}else{
				if(payment == 'balance' && s.code == 1){
					dialog.msg(s);
					setTimeout(function(){
						location.href = location.href;
					},2000);
					return false;
				}
				showQrcode = dialog.open({
					type: 1,
					anim: 2,
					title: payment == 'wxpay' ? '请使用微信扫描二维码完成付款' : '请使用QQ扫描二维码完成付款',
					shadeClose: false,
					content: '<div class="p-3 pay-qrcode" style="width:332px;height:337px;"></div>'
				});
				$('.pay-qrcode').qrcode({width: 300,height: 300,text: s.data.qrcode});
			}
			return false;
		}
		function queryOrder(){
			$.ajax({
				url:'{:url('index/user/buy_meal_query')}',
				data:{order_id:'{$order['order_id']}'},
				type:'POST',
				success:function(s){
					clearInterval(queryInterval);
					if(s.code == 1){
						dialog.close(showQrcode);
						dialog.msg({code:1,msg:'恭喜您，服务开通成功!'},{time:2000,shade:[0.3,'#000'],anim:6},function(){
							location.href = location.href;
						});
					}else{
						queryInterval = setTimeout(function(){
							queryOrder();
						},2000);
					}
				}
			})
		}
	</script>
{/if}
